<template>
	<!-- #ifdef APP -->
	<scroll-view class="container" style="flex: 1">
	<!-- #endif -->
	<!-- #ifdef WEB -->
	<view class="web-container">
	<!-- #endif -->
		<!-- 状态栏 -->
		<view class="status-bar">
			<view class="status-indicator online">
				<view class="status-dot"></view>
				<text class="status-text">设备在线</text>
			</view>
			<text class="connection-info">连接时长: {{connectionTime}}</text>
		</view>

		<!-- 实时心电图卡片 -->
		<view class="card ecg-card">
			<view class="card-header">
				<text class="card-icon">📈</text>
				<text class="card-title">实时心电图</text>
				<view class="recording-indicator">
					<view class="recording-dot"></view>
					<text class="recording-text">录制中</text>
				</view>
			</view>
			
			<view class="ecg-display">
				<!-- 心电图波形区域 -->
				<view class="ecg-waveform">
					<view class="waveform-grid">
						<view class="grid-line" v-for="i in 6" :key="i"></view>
					</view>
					<view class="waveform-line">
						<!-- 模拟实时波形数据点 -->
						<view 
							class="wave-point" 
							v-for="(point, index) in waveformData" 
							:key="index"
							:style="{left: point.x + '%', bottom: point.y + '%'}"
						></view>
					</view>
				</view>
				
				<!-- 心率数值显示 -->
				<view class="heart-rate-display">
					<text class="heart-rate-value">{{currentHeartRate}}</text>
					<text class="heart-rate-unit">BPM</text>
				</view>
			</view>
		</view>

		<!-- 实时数据指标 -->
		<view class="metrics-grid">
			<view class="metric-card">
				<text class="metric-icon">💗</text>
				<text class="metric-label">心率</text>
				<text class="metric-value">{{heartRate}}</text>
				<text class="metric-unit">次/分</text>
			</view>
			
			<view class="metric-card">
				<text class="metric-icon">🩸</text>
				<text class="metric-label">血氧</text>
				<text class="metric-value">{{oxygenLevel}}</text>
				<text class="metric-unit">%</text>
			</view>
			
			<view class="metric-card">
				<text class="metric-icon">🫁</text>
				<text class="metric-label">呼吸</text>
				<text class="metric-value">{{breathingRate}}</text>
				<text class="metric-unit">次/分</text>
			</view>
			
			<view class="metric-card">
				<text class="metric-icon">🌡️</text>
				<text class="metric-label">体温</text>
				<text class="metric-value">{{bodyTemp}}</text>
				<text class="metric-unit">°C</text>
			</view>
		</view>

		<!-- 监测控制 -->
		<view class="control-panel">
			<view class="control-button primary" @click="toggleMonitoring">
				<text class="button-text">{{isMonitoring ? '停止监测' : '开始监测'}}</text>
			</view>
			<view class="control-button secondary" @click="exportData">
				<text class="button-text">导出数据</text>
			</view>
		</view>

		<!-- 历史记录快捷入口 -->
		<view class="quick-actions">
			<text class="section-title">快捷操作</text>
			<view class="action-list">
				<view class="action-item" @click="viewHistory">
					<text class="action-icon">📊</text>
					<text class="action-text">查看历史</text>
					<text class="action-arrow">></text>
				</view>
				<view class="action-item" @click="setAlert">
					<text class="action-icon">🚨</text>
					<text class="action-text">设置提醒</text>
					<text class="action-arrow">></text>
				</view>
				<view class="action-item" @click="deviceSettings">
					<text class="action-icon">⚙️</text>
					<text class="action-text">设备设置</text>
					<text class="action-arrow">></text>
				</view>
			</view>
		</view>

	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
	<!-- #ifdef WEB -->
	</view>
	<!-- #endif -->
</template>

<script>
	export default {
		data() {
			return {
				// 连接状态
				connectionTime: "02:15:33",
				isMonitoring: true,
				
				// 实时数据
				currentHeartRate: 78,
				heartRate: 78,
				oxygenLevel: 98,
				breathingRate: 16,
				bodyTemp: 36.5,
				
				// 波形数据
				waveformData: []
			}
		},
		onLoad() {
			this.initWaveformData()
			this.startRealTimeUpdate()
		},
		onUnload() {
			this.stopRealTimeUpdate()
		},
		methods: {
			// 初始化波形数据
			initWaveformData() {
				const data = []
				for (let i = 0; i < 50; i++) {
					data.push({
						x: i * 2,
						y: 30 + Math.sin(i * 0.5) * 20 + Math.random() * 10
					})
				}
				this.waveformData = data
			},
			
			// 开始实时更新
			startRealTimeUpdate() {
				// 模拟实时数据更新
				this.updateTimer = setInterval(() => {
					this.updateWaveformData()
					this.updateVitalSigns()
				}, 500)
			},
			
			// 停止实时更新
			stopRealTimeUpdate() {
				if (this.updateTimer) {
					clearInterval(this.updateTimer)
				}
			},
			
			// 更新波形数据
			updateWaveformData() {
				const newData = [...this.waveformData]
				newData.shift() // 移除第一个点
				newData.push({
					x: 98,
					y: 30 + Math.sin(Date.now() * 0.001) * 20 + Math.random() * 10
				})
				// 重新计算x坐标
				for (let i = 0; i < newData.length; i++) {
					newData[i].x = i * 2
				}
				this.waveformData = newData
			},
			
			// 更新生命体征
			updateVitalSigns() {
				// 模拟轻微的数据波动
				this.heartRate = 75 + Math.floor(Math.random() * 10)
				this.currentHeartRate = this.heartRate
				this.oxygenLevel = 97 + Math.floor(Math.random() * 3)
				this.breathingRate = 14 + Math.floor(Math.random() * 5)
			},
			
			// 切换监测状态
			toggleMonitoring() {
				this.isMonitoring = !this.isMonitoring
				uni.showToast({
					title: this.isMonitoring ? "开始监测" : "停止监测",
					icon: "success"
				})
			},
			
			// 导出数据
			exportData() {
				uni.showToast({
					title: "数据导出功能开发中",
					icon: "none"
				})
			},
			
			// 查看历史
			viewHistory() {
				uni.navigateTo({
					url: "/pages/report/report"
				})
			},
			
			// 设置提醒
			setAlert() {
				uni.showToast({
					title: "提醒设置功能开发中",
					icon: "none"
				})
			},
			
			// 设备设置
			deviceSettings() {
				uni.showToast({
					title: "设备设置功能开发中", 
					icon: "none"
				})
			}
		}
	}
</script>

<style>
	.container {
		background-color: #f5f5f5;
		padding: 12px;
	}
	
	/* #ifdef WEB */
	.web-container {
		background-color: #f5f5f5;
		padding: 20px;
		min-height: 100vh;
		max-width: 1200px;
		margin: 0 auto;
		overflow-y: auto;
	}
	/* #endif */

	.card {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 16px;
		margin-bottom: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	/* 状态栏 */
	.status-bar {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 12px 16px;
		background-color: #ffffff;
		border-radius: 12px;
		margin-bottom: 12px;
	}

	.status-indicator {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.status-dot {
		width: 8px;
		height: 8px;
		border-radius: 4px;
		background-color: #00d4aa;
		margin-right: 8px;
	}

	.status-text {
		font-size: 14px;
		font-weight: 500;
		color: #333333;
	}

	.connection-info {
		font-size: 12px;
		color: #666666;
	}

	/* 心电图卡片 */
	.ecg-card {
		margin-bottom: 16px;
		min-height: 200px;
	}

	.card-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16px;
	}

	.card-icon {
		font-size: 16px;
		margin-right: 8px;
	}

	.card-title {
		font-size: 16px;
		font-weight: 600;
		color: #333333;
		flex: 1;
	}

	.recording-indicator {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.recording-dot {
		width: 6px;
		height: 6px;
		border-radius: 3px;
		background-color: #ff4444;
		margin-right: 6px;
		animation: pulse 1.5s infinite;
	}

	.recording-text {
		font-size: 12px;
		color: #ff4444;
	}

	/* 心电图显示区域 */
	.ecg-display {
		display: flex;
		flex-direction: column;
	}

	.ecg-waveform {
		height: 120px;
		position: relative;
		background-color: #000000;
		border-radius: 8px;
		overflow: hidden;
		margin-bottom: 16px;
	}

	.waveform-grid {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.grid-line {
		height: 1px;
		background-color: #00ff00;
		opacity: 0.3;
	}

	.waveform-line {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.wave-point {
		position: absolute;
		width: 2px;
		height: 2px;
		background-color: #00ff00;
		border-radius: 1px;
	}

	.heart-rate-display {
		display: flex;
		flex-direction: row;
		align-items: baseline;
		justify-content: center;
	}

	.heart-rate-value {
		font-size: 32px;
		font-weight: 700;
		color: #ff4444;
	}

	.heart-rate-unit {
		font-size: 16px;
		color: #666666;
		margin-left: 4px;
	}

	/* 指标网格 */
	.metrics-grid {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 16px;
	}

	.metric-card {
		flex: 1;
		min-width: 120px;
		background-color: #ffffff;
		border-radius: 12px;
		padding: 16px;
		margin: 6px;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.metric-icon {
		font-size: 20px;
		margin-bottom: 8px;
	}

	.metric-label {
		font-size: 12px;
		color: #666666;
		margin-bottom: 4px;
	}

	.metric-value {
		font-size: 18px;
		font-weight: 600;
		color: #333333;
		margin-bottom: 2px;
	}

	.metric-unit {
		font-size: 10px;
		color: #999999;
	}

	/* 控制面板 */
	.control-panel {
		display: flex;
		flex-direction: row;
		margin-bottom: 16px;
	}

	.control-button {
		flex: 1;
		height: 48px;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 6px;
	}

	.control-button.primary {
		background-color: #007AFF;
	}

	.control-button.secondary {
		background-color: #f0f0f0;
	}

	.button-text {
		font-size: 16px;
		font-weight: 500;
	}

	.control-button.primary .button-text {
		color: #ffffff;
	}

	.control-button.secondary .button-text {
		color: #333333;
	}

	/* 快捷操作 */
	.quick-actions {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 16px;
	}

	.section-title {
		font-size: 16px;
		font-weight: 600;
		color: #333333;
		margin-bottom: 12px;
	}

	.action-list {
		display: flex;
		flex-direction: column;
	}

	.action-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.action-item:last-child {
		border-bottom: none;
	}

	.action-icon {
		font-size: 16px;
		margin-right: 12px;
	}

	.action-text {
		font-size: 14px;
		color: #333333;
		flex: 1;
	}

	.action-arrow {
		font-size: 14px;
		color: #999999;
	}

	/* 动画效果 */
	@keyframes pulse {
		0% { opacity: 1; }
		50% { opacity: 0.5; }
		100% { opacity: 1; }
	}

	/* Web平台适配 */
	/* #ifdef WEB */
	.control-button {
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.control-button:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}

	.action-item {
		cursor: pointer;
		transition: background-color 0.2s ease;
	}

	.action-item:hover {
		background-color: #f8f9fa;
	}
	/* #endif */

	/* Android状态栏适配 */
	/* #ifdef APP-ANDROID */
	.container {
		padding-top: 25px;
	}
	/* #endif */
</style> 